iT邦幫忙

2022 iThome 鐵人賽

DAY 22
0
自我挑戰組

新手前端與真實世界的開發 feat.React 與他的夥伴系列 第 22

Day-22 專案演練 - 修改與刪除代辦清單

  • 分享至 

  • xImage
  •  

Day-22 專案演練 - 修改與刪除代辦清單 useState()

很開心的把表格的功能做完,但我似乎忘記了很多事情,如果它是個 todo list,那是不是除了新增,還要有刪除、修改、是否完成的狀態呢?恭喜我,終於想起來了呢,這個畫面是不是似曾相似呢 XD,該繼續來填坑了呢!

useState()

參考官方網站介紹使用規則

在 react 中,利用 state,可以將 UI 與資料內容綁定,這點在 class 或者 function 元件中都是一樣的,而一般學 react hook 時會碰到的第一個 hook 就是 useState()。

react hook 的規則 :

  1. 只能在 function 元件內使用
  2. 在 function 元件的頂曾呼叫
  3. 會用 use 作為開頭(不這樣寫的話,react 沒辦法幫你抓出規則上的使用錯誤)
const [count, setCount] = useState(0);

把被遺忘的 UI 放回去表格

因為操作是不需要被 useTable 掌管的資料,所以讓它脫離掌控!

...
            <Thead>
              {table.getHeaderGroups().map((headerGroup) => (
                <Tr>
                  {headerGroup.headers.map((header) => (
                    <Th
                      {...{
                        className: header.column.getCanSort()
                          ? "cursor-pointer select-none"
                          : "",
                        onClick: header.column.getToggleSortingHandler(),
                      }}
                    >
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                      {{
                        asc: " ?",
                        desc: " ?",
                      }[header.column.getIsSorted() as string] ?? null}
                    </Th>
                  ))}
                  <Th>操作</Th> // 增加操作表頭
                </Tr>
              ))}
            </Thead>
              <Tbody>
              {table.getRowModel().rows.map((row) => (
                <Tr key={row.id}>
                  {row.getVisibleCells().map((cell) => (
                    <Td key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </Td>
                  ))}
                  <Td>
                    <button className="px-[2px]">修改</button> // 增加與操作相應的內容
                    <button className="px-[2px]">刪除</button>
                  </Td>
                </Tr>
              ))}
            </Tbody>
...

添加修改功能

說到修改,就是要在點擊之後,去找到目前的 todo 是哪一個,去修改它的內容,我這次想用獨一 id 的方式去做這個功能,所以在原本的 list 裡面再添加一個 id :

const [list, setList] =
  useState <
  any >
  (() => [
    {
      id: "1",
      time: "2018-07-22",
      title: "購物",
      info: "日用品",
      checked: false,
    },
    {
      id: "2",
      time: "2022-09-15",
      title: "鐵人賽",
      info: "day-10",
      checked: true,
    },
    { id: "3", time: "2022-09-25", title: "摺棉被", info: "", checked: false },
  ]);

但後來加上刪除功能之後發現,因為 list 改變之後,本來放在元素上面的 id 因為重新渲染改變,但 list 裡面待辦事項的 id 並不會因此改變,這個問題我想先保留下來,在未來找個時間來進行處理。

<button
  className="px-[2px]"
  id={row.id}
  onClick={(e) => {
    const id = e.currentTarget.id;
    const currentItem = list[id];
  }}
>
  修改
</button>

添加刪除功能

本來是一樣使用找 id 的方式取得要刪除的待辦事項,後來我改用取得畫面資料來跟 list 中資料對造的方式來找出需要刪除的項目 :

<button
  className="px-[2px]"
  id={row.id}
  onClick={(e) => {
    const id = e.currentTarget.id;
    const currentItem = list[id];
    const nowList = list.filter((i) => i !== currentItem);
    setList(nowList);
  }}
>
  刪除
</button>

repo

附上程式碼

結語

寫完修改與刪除(雖然修改還沒完成,但就差一點點了),腦海中對於 react 中的 state 與畫面綁定的觀念會有比較深刻的印象,這個觀念在實作當中是相當重要的。

參考資料


上一篇
Day-21 專案演練 - 打造表格分頁功能 react-table
下一篇
Day-23 專案演練 - 狀態管理員 redux
系列文
新手前端與真實世界的開發 feat.React 與他的夥伴30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言